<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>顾客订单信息</title>
  <link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<!--
单页应用， 所有功能集成在当前页面
一般对数据的操作就是  增，删，改，查
1   打开该页时自动访问后端controller得到列表数据【查】
2   点击具体按钮时访问后端controller 执行操作【增，删，改】
3   利用DOM（不刷新页面修改页面局部内容）
4   利用异步网络请求ajax（不刷新页面在浏览器后台发送HTTP请求）
-->
<h1 style="text-align: center">顾客订单信息展示</h1>
<div id="Orderinf" >
  <table class="table table-primary table-layout:fixed table-hover table-striped">
    <thead>
    <tr>
      <th>订单号</th>
      <th>顾客号</th>
      <th>顾客名</th>
      <th>顾客地址</th>
      <th>顾客电话</th>
      <th>餐馆老板</th>
      <th>总价格</th>
<!--      <th>菜品号</th>-->
      <th>菜名1</th>
<!--      <th>菜品号</th>-->
      <th>菜名2</th>
<!--      <th>菜品号</th>-->
      <th>菜名3</th>
      <th>菜名4</th>
      <th>菜名5</th>
      <th>菜名6</th>
      <th>菜名7</th>
      <th>菜名8</th>
      <th>菜名9</th>
      <th>菜名10</th>
      <th>菜名11</th>
    </tr>
    </thead>
    <tbody id="display">
    <tr>

    </tr>
    </tbody>
  </table>


</div>


<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>

<script>
  //页面加载时
  $(document).ready(function () {
    //访问所有商家数据
    // var cid = window.location.search.substring(1);
    var cid = window.location.href.split("=")[1];
    console.log(cid);
    $.ajax({
      url:"orderinf/customercheckorderinf",
      data:{cid:cid},
      type:"GET",
      dataType:"json",
      success:function(ret){
        console.log(ret);
        //将数据渲染到页面中
        $("#display").empty();//先清空原始内容
        let orders = ret.dataZone.orderlist;
        //开始循环遍历
        $.each(orders,function(index,item){
          //遍历一次创建一个行
          var rTr = $("<tr></tr>");
          //依次构建单元格td

          var oidTd = $('<td></td>').text(item.oid);
          var ocustomeridTd = $('<td></td>').text(item.customer.cid);
          var cusernameTd = $('<td></td>').text(item.customer.cusername);
          var caddressTd = $('<td></td>').text(item.customer.caddress);
          var cphoneTd = $('<td></td>').text(item.customer.cphone);
          //var orestaurantidTd = $('<td></td>').text(item.resaurant.rid);
          var rusernameTd = $('<td></td>').text(item.restaurant.rusername);
          var ototalvalueTd = $('<td></td>').text(item.ototalvalue);
          rTr.append(oidTd).append(ocustomeridTd).append(cusernameTd).append(caddressTd).append(cphoneTd).append(rusernameTd).append(ototalvalueTd)
          i=0;
          $.each(item.dishess,function (index1,item1){
            var dnameTd = $('<td></td>').text(item.dishess[i].dname);
            i=i+1;
            rTr.append(dnameTd)
          });
            //var didTd = $('<td></td>').text(item.dishess[0].did);
            //var dnameTd = $('<td></td>').text(item.dishess[0].dname);
            //var did1Td = $('<td></td>').text(item.dishess[1].did);
            //var dname1Td = $('<td></td>').text(item.dishess[1].dname);
            //var did2Td = $('<td></td>').text(item.dishess[2].did);
            //var dname2Td = $('<td></td>').text(item.dishess[2].dname);
            //var dname3Td = $('<td></td>').text(item.dishess[3].dname);
            //rTr/*.append(didTd)*/.append(dnameTd)./*append(did1Td).*/append(dname1Td)./*append(did2Td).*/append(dname2Td).append(dname3Td)


          //每次循环将创建的td追加到tr中
          /*.append(orestaurantidTd)*/

          //每次循环将创建的tr追加到tbody中
          $("#display").append(rTr); // 每次修改前端页面都需要重启服务器太浪费时间， 可以考虑热部署
        });

      },
      error:function (eno){
        console.log(eno);
      }
    });
  });

</script>

</body>
</html>